<template>
  <div id="app">
    <img style="filter: brightness(0.8);width: 100vw;height: 31vw;" src="https://webimg.ziroom.com/1746b963-dcbf-4b30-b270-5634aaeb1782.jpg" alt="">
    <div class="text">
        <h1>随心生活</h1>
        <p>随心生活，都市青年生活社区</p>
        <p>随心居全屋智能，智能家居美学生活馆</p>
    </div>
    <div class="bx">
        <img style="display:block;margin:30px auto;width:227px;height:53px;" src="../assets/file.jpg" alt="">
        <ul>
            <li>
                <img src="https://webimg.ziroom.com/840b53d6-216b-42b8-8838-eb82d07fc062.gif" alt="">
                <div class="ewm">
                    <img src="https://webimg.ziroom.com/6700c620-c91e-4960-b10f-29aa311754bf.png" alt=""/>
                    <h3>扫码查看详情</h3>
                    <p>抢先锁定活动名额</p>
                </div>
                <h2>有奖任性 | 一个人租房住真的爽到爆啊！</h2>
                <p>这时而丧，时而积极的人生啊...</p>
            </li>
            <li>
                <img src="https://webimg.ziroom.com/76ac3d96-94c8-4c15-a9c5-af2e4b9c774d.gif" alt="">
                <div class="ewm">
                    <img src="https://webimg.ziroom.com/6700c620-c91e-4960-b10f-29aa311754bf.png" alt=""/>
                    <h3>扫码查看详情</h3>
                    <p>抢先锁定活动名额</p>
                </div>
                <h2>有奖投票 | 你有哪些间歇性热爱生活的方式？</h2>
                <p>这时而丧，时而积极的人生啊...</p>
            </li>
            <li>
                <img src="http://image.ziroom.com/g2m1/M00/DE/63/ChAFB1xjupqAJ3NNAAMWjmi9bSc69.jpeg" alt="">
                <div class="ewm">
                    <img src="https://webimg.ziroom.com/6700c620-c91e-4960-b10f-29aa311754bf.png" alt=""/>
                    <h3>扫码查看详情</h3>
                    <p>抢先锁定活动名额</p>
                </div>
                <h2>一个人住，我有超能力，你呢</h2>
                <p>这时而丧，时而积极的人生啊...</p>
            </li>
            <li>
                <img src="https://webimg.ziroom.com/eb46e6eb-321c-41cb-8abe-0240af5d0ca7.jpeg" alt="">
                <div class="ewm">
                    <img src="https://webimg.ziroom.com/6700c620-c91e-4960-b10f-29aa311754bf.png" alt=""/>
                    <h3>扫码查看详情</h3>
                    <p>抢先锁定活动名额</p>
                </div>
                <h2>随心居128CLUB</h2>
                <p>回到初心复始的梦乐园，开启一场意想不到的逃跑星球计划！</p>
            </li>
        </ul>
    </div>
    <div class="seven">
      <img style="display: block;width:260px;height:82px;margin:60px auto" src="../assets/cc.jpg" alt="">
      <ul>
        <li>
          <img :class="{ 'active': fd == 1 }" src="https://webimg.ziroom.com/963bf55e-baf0-417f-84c3-60742d11ac44.jpg" alt="正在加载..."/>
          <div @mouseover="fd=1" @mouseleave="fd=0" class="kk"></div>
          <p>2019自如国际胡同节</p>
          <p>1000+中外自如客在这座京城二环的百年院落里，一起玩转Bazinga4王争霸赛/CP匹配交友 / 京城最IN中英脱口秀 / Silent Disco… 拯救平线心电图，逛吃逛喝笑翻...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 2 }" src="https://webimg.ziroom.com/461edb17-1685-450a-8b29-4c7e6ae96755.jpg" alt="正在加载..."/>
          <div @mouseover="fd=2" @mouseleave="fd=0" class="kk"></div>
          <p>2019自如跨年趴</p>
          <p>喝最烈的酒，蹦最野的迪，700位自如客齐跨年，嗨皮共享金猪年，将欢乐和感动从2018带到2019...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 3 }" src="https://webimg.ziroom.com/24fd2a34-32f8-49f6-98fc-8b8884fa7b9b.jpg" alt="正在加载..."/>
          <div @mouseover="fd=3" @mouseleave="fd=0" class="kk"></div>
          <p>自如驿跨年音乐会</p>
          <p>在三里屯团结自如驿穿越至90’s找寻旧时欢乐，超酷乐队嗨翻全场，惊喜抽奖、趣味游戏、童年零食和饮料……百位自如客携手倒计时喜提2019...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 4 }" src="https://webimg.ziroom.com/aa677920-bc8b-4f35-9395-e9dbee237977.jpg" alt="正在加载..."/>
          <div @mouseover="fd=4" @mouseleave="fd=0" class="kk"></div>
          <p>地下72小时遇见派对</p>
          <p>都市单身青年齐聚愚园路，这是一场聚集恋爱、游戏、音乐、艺术的社交派对。多个潮酷艺术装置，“CP”互动体验区，纵享沉浸式浪漫嗨心体验，开启跨越时空遇见...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 5 }" src="https://webimg.ziroom.com/4cbf9e47-fcbd-4f37-9792-490215b1dc2b.jpg" alt="正在加载..."/>
          <div @mouseover="fd=5" @mouseleave="fd=0" class="kk"></div>
          <p>直击万圣节鬼混现场</p>
          <p>五座城市，八场线下活动，五百位自如客参与，惊魂鬼屋、尖叫PK、捉鬼有礼、百鬼夜行……这个万圣节，自如与你一起“妆”神弄鬼，魔人狂欢一整夜...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 6 }" src="https://webimg.ziroom.com/53ce51e9-4968-461b-a208-eaf7e0536bac.jpg" alt="正在加载..."/>
          <div @mouseover="fd=6" @mouseleave="fd=0" class="kk"></div>
          <p>自如西塘汉服节</p>
          <p>36位自如客的汉服体验之旅，36小时的沉浸式游戏互动。行烟雨长廊，驻足安境桥上，南湖有佳人，回忆梢上...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 7 }" src="https://webimg.ziroom.com/2ef2ca0c-4487-4104-a73a-21a0e7d9c471.jpg" alt="正在加载..."/>
          <div @mouseover="fd=7" @mouseleave="fd=0" class="kk"></div>
          <p>海洋球欢乐到家服务</p>
          <p>自如联合什刹海共同打造了一间只存在14天的小隐隐于什刹海边的“海景房”，中秋夜和自如客们倚舟赏月，对酒当歌，一起吃蟹，祝大家节日快乐...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 8 }" src="https://webimg.ziroom.com/4d19cb1e-2be3-4754-81ec-c734d3fe5d67.jpg" alt="正在加载..."/>
          <div @mouseover="fd=8" @mouseleave="fd=0" class="kk"></div>
          <p>自如生活节 | 看海人</p>
          <p>自如联合什刹海共同打造了一间只存在14天的小隐隐于什刹海边的“海景房”，中秋夜和自如客们倚舟赏月，对酒当歌，一起吃蟹，祝大家节日快乐...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 9 }" src="https://webimg.ziroom.com/28daeae7-fe25-448f-a0ea-faadebb37709.jpg" alt="正在加载..."/>
          <div @mouseover="fd=9" @mouseleave="fd=0" class="kk"></div>
          <p>自如生活节 | 喜剧周末</p>
          <p>17场脱口秀 / 3个展览 /2场SILENT DISCO / 1个独立书店，在北京夏天的尾巴里，史炎、ROCK等脱口秀大咖在安静的东二环内的自如Z-SPACE造了一个梦...</p>
        </li>
        <li>
          <img :class="{ 'active': fd == 10 }" src="https://webimg.ziroom.com/7173e8e9-4350-4410-aed8-a0ce43214da6.jpg" alt="正在加载..."/>
          <div @mouseover="fd=10" @mouseleave="fd=0" class="kk"></div>
          <p>自如生活节 | 不房结婚</p>
          <p>七夕，自如生活节系列活动之“不房结婚”在北京二环内的四合院Z-SPACE举行。9对自如客新人齐聚三百年银杏树下，共同迈入了婚姻的殿堂...</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
window.onscroll = function () {
  var t = document.documentElement.scrollTop || document.body.scrollTop;
  if (t >= 500) {
    header.classList.add("active");
  } else {
    header.classList.remove("active");
  }
    }
export default {
    data(){
        return{
            fd:1
        }
    }
}
</script>


<style lang="scss" scoped>
#app{
    position: relative;
    top: 0;
    .text{

        display: flex;
        align-items: left;
        height: 100px;
        flex-direction: column;
        position: absolute;
        z-index: 2;
        top: 180px;
        color: #fff;
        text-align: left;
        left: 25vw;
        h1{
            font-size: 60px;
        }
    }
}
.bx{
    width: 1252px;
    margin:30px auto;
    ul{
        width: 100%;
        height: 800px;
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        li{
            width: 550px;
            height: 388px;
            display: flex;
            flex-direction: column;
            position: relative;
            align-items:center;
            justify-content: space-evenly;
            h2{
                color: rgb(48, 48, 48);
            }

            img{
                width: 550px;
                height: 288px;
                
            }
            .ewm{
                display: flex;
                position: absolute;
                z-index: 1;
                top: 60px;
                flex-direction: column;
                align-items:center;
                justify-content: space-evenly;
                transform: scale(0);
                color: #fff;
                transition: all 0.5s;
            img{
                width: 136px;
                height: 136px;
            }
            }
            &:hover{
                img{
                    filter:brightness(0.4)
                }
                .ewm{
                    transform: scale(1);
                    img{
                        filter:brightness(1)
                    }
                }
            }

        }
    }
}

.seven{
  margin-top: 5vw;
  width: 100vw;
  ul{
    width: 100vw;
    list-style-type: none;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-evenly;
    li{
      width: 20%;
      height: 20vw;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      img{
        width: 100%;
        height: 100%;
        transition:all 1.5s;
        &.active{
          transform: scale(1.1);
          filter:brightness(0.6)
        }
      }
      .kk{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 3;
      }
      p:nth-child(3){
        opacity: 0;
        font-size: 25px;
        font-weight: 600;
        color: #fff;
        position: absolute;
        z-index: 1;
        top: 3vw;
        }
        p:nth-child(4){
          opacity: 0;
          width: 200px;
          color: #fff;
          font-size: 15px;
          position: absolute;
          z-index: 1;
        }
        .kk:hover ~ p{
          transition:1.5s;
          opacity: 1;
        }
    }
  }
}
</style>
